<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <h1>{{ hobby }}</h1>
    <button @click="add">点击我加上1</button>
    <button @click="minus">点击我减去1</button>
    <button @click="evenAdd">点击我偶数加1</button>
    <button @click="evenMinus">点击我奇数减1</button>
    <button @click="addNine">点击我加上9</button>
    <button @click="addTime">点击我两秒之后加上1</button>
      <hr>
    <!-- 
       原生DOM也有这个事件:
       input:当文本框内容发生变化,立即触发事件
       change:当文本框内容发生变化(点击空白的地方)才会执行!!!
     -->
    <input type="text" :value="count" @input="changeHandler">
  </div>
</template>

<script>
//vuex提供一些辅助性的函数,函数可以把仓库的数据添加组件实例！！
import { mapState,mapGetters } from "vuex";

export default {
  name: "",
  mounted() {
    //VC.$store ->this.$store
    //项目中已经把仓库进行注册,任何VC都与仓库进行关联,VC可以获取到仓库里面数据！！！
    // this.$store.state.count
    // console.log(this.$store)
  },

  methods: {
    add() {
      //生活例子:张三派遣一个小弟,告诉他【去仓库办公室action,找到名字叫做add这个人,审批这次申请】
      //程序员:VC派发一个add类型的action
      this.$store.dispatch("add");
    },
    minus() {
      this.$store.dispatch("minus");
    },
    evenAdd() {
      this.$store.dispatch("evenAdd");
    },
    evenMinus() {
      this.$store.dispatch("evenMinus");
    },
    addNine() {
      // dispatch可以有两个参数
      // 第一参数：vuex仓库里actions名字
      //第二个参数:载荷【payload】,第二个参数起始就是VC组件实例给actions传递参数
      //没有第三个参数了
      this.$store.dispatch("addNine", 9);
    },
    addTime() {
      this.$store.dispatch("addTime");
    },
    changeHandler(e){
      this.$store.dispatch('updateCount',e.target.value)
    },
    
  },
    //计算属性:利用已有的属性[$store]与属性值,创造出一个新的属性与属性值！！！
  //计算属性：缓存
  computed: {
    // 数组里面书写的是state右侧对象的k,将仓库数据作为组件实例的
    ...mapState(["count", "hobby"]),
    ...mapGetters(['total'])
  },
};
</script>

<style>
</style>